<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部结构 -->
      <el-card shadow="never">
        <!-- 面包屑结构 -->
        <div slot="header" class="clearfix" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              this.$route.query.name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 搜索区域 -->
        <div class="el-row">
          <div class="el-col el-col-18">
            <el-form
              :inline="true"
              :model="params"
              class="el-form el-form--inline"
              style="height: 50.67px"
            >
              <el-form-item label="标签名称">
                <el-input v-model="params.tagName" />
              </el-form-item>
              <el-form-item label="状态" style="margin-left: 15px">
                <el-select
                  v-model="params.state"
                  placeholder="请选择状态"
                  size="small"
                >
                  <el-option
                    v-for="item in stateList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="reset">清除</el-button>
                <el-button type="primary" size="small" @click="search"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="el-col el-col-6" style="text-align: right">
            <!-- 跳转回到学科页面 -->
            <el-button
              type="text"
              icon="el-icon-back"
              @click="$router.push('/subjects/list')"
              class="button"
              v-if="$route.query.name"
              >返回学科</el-button
            >

            <!-- 新增标签的按钮 -->
            <el-button
              type="success"
              size="medium"
              class="btn-pub"
              @click.native="addTag"
              icon="el-icon-edit"
              >新增标签</el-button
            >
          </div>
        </div>
        <!-- 信息提示栏 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 表格部分 -->
        <el-table :data="tagList">
          <!-- 指定序号 添加 type=index -->
          <el-table-column label="序号" width="80" type="index" />
          <el-table-column label="所属学科" prop="subjectName" />
          <el-table-column label="标签名称" prop="tagName" />
          <el-table-column label="创建者" prop="username" />
          <el-table-column label="创建日期" prop="addDate">
            <!-- 通过作用域将时间格式化 -->
            <template #default="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>

          <el-table-column label="状态" prop="state">
            <template #default="{ row }">
              {{ row.state === 0 ? "已禁用" : "已启用" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template #default="{ row }">
              <el-button type="text" @click="tagDisable(row)">
                <template>
                  {{ row.state === 1 ? "禁用" : "启用" }}
                </template>
              </el-button>

              <el-button
                type="text"
                @click="tagEdit(row)"
                :disabled="row.state === 0"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="tagRemove(row)"
                :disabled="row.state === 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!--
            核心分页逻辑
            页数 = 总条数 / 每页条数 total/pagesize
            给组件传递 total总条数 pagesize每页几条(默认10条)
           -->
        <!-- 分页组件 -->
        <div style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="params.pagesize"
            layout=" ->, prev, pager ,next ,sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 新增部分弹框 -->
      <TagsAdd
        :showDialog="dialogVisible"
        @close-dialog="closeDialog"
        ref="addDepart"
      />
      <!-- :subjectID="params.subjectID" -->
      <!-- :tagName="tagName" -->
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from "@/api/hmmm/tags";
import dayjs from "dayjs";
import TagsAdd from "../components/tags-add.vue";
export default {
  name: "tags",
  components: { TagsAdd },
  data() {
    return {
      // input: "",
      tagList: [], // 列表数据
      params: {
        page: 1, // 当前页码
        pagesize: 10, // 每页展示多少条
        state: null, // 状态
        tagName: null, // 标签名称
        subjectID: this.$route.query.id || null // 学科id
      },
      alertText: "", // 显示提示栏
      counts: 0, // 总条数
      // state: "", // 状态
      dialogVisible: false, // 弹框显示与隐藏
      // subjectID: null,
      // subjectName: "",
      // tagName: "", //用于编辑标签时回显
      // 状态枚举
      stateList: [
        {
          id: 1,
          name: "启用"
        },
        {
          id: 0,
          name: "禁用"
        }
      ]
    };
  },
  mounted() {
    this.fetchTagList();
  },
  // 从某学科标签单独页面跳转所有标签页面时，组件复用，需手动重置数据
  beforeRouteUpdate(to, from, next) {
    this.params.subjectID = null;
    this.fetchTagList();
    next();
  },
  methods: {
    // 获取表格数据
    async fetchTagList() {
      const data = await list(this.params);
      this.tagList = data.data.items;
      this.counts = data.data.counts;
      this.alertText = `数据一共 ${this.counts} 条`;
      // this.pages = data.data.pages;
      // this.subjectID = data.data.subjectID;
      // this.tagName = data.data.tagName;
    },
    // 关键字搜索
    search() {
      // 每次筛选，都从第一页开始查询
      this.params.page = 1;
      this.fetchTagList();
    },
    // 重置
    reset() {
      this.params = { page: 1, pagesize: 10, directoryName: null, state: null };
      // 请求接口
      this.fetchTagList();
    },
    // 格式化时间
    formatDate(value) {
      return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
    },
    // 点击控制按钮状态
    async tagDisable(row) {
      try {
        this.state = row.state === 1 ? 0 : 1; // 每次点击就是将状态转换为相反的状态
        await changeState({ state: this.state, id: row.id }); // 状态改变的接口
        this.fetchTagList();
        this.$message.success("操作成功");
      } catch (e) {
        console.log(e);
      }
    },
    // 点击打开添加弹框
    addTag() {
      this.dialogVisible = true;
      // if(this.params.subjectID)
      // this.subjectID=
      // this.$refs.addDepart.getDetail(data);
    },
    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false;
      this.fetchTagList();
    },
    // 修改标签
    async tagEdit(data) {
      // console.log(data);
      this.$refs.addDepart.getTagItem(data);
      this.dialogVisible = true;
      // this.$refs.addDepart.getDetail(data);
    },
    // 删除标签
    tagRemove(data) {
      this.$confirm("此操作将永久删除标签 " + ", 是否继续?", "提示", {
        type: "warning"
      })
        .then(async () => {
          await remove(data);
          this.fetchTagList();
          this.$message.success("删除标签成功");
          // 则说明当前页已没有数据可显示，需要让页码值 -1
          if (this.tagList.length === 1 || this.params.page > 1) {
            this.params.page--;
          }
          // 刷新列表数据
          this.fetchTagList();
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
    // 分页器
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      // 1. 为 pagesize 赋值
      this.params.pagesize = size;
      // 每次都定位 第一页
      // 当前展示页数 从第一页开始查
      this.params.page = 1;
      // 2. 重新请求列表数据
      this.fetchTagList();
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
      this.params.page = page;
      this.fetchTagList();
    }
  }
};
</script>
<style scoped lang="scss">
/* 头部样式 */
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.alert {
  margin: 0px 0px 15px 0;
}

::v-deep .el-row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 50px;
}
.el-col-18 {
  width: 75%;
}

.el-col-6 {
  width: 25%;
}
</style>
